<template>
  <div class="attention">
    <van-notice-bar mode="closeable">
      以下加项已为您去除同类和冲突项，请根据个人需求放心选择</van-notice-bar
    >
    <div class="content">
      <!-- 侧边栏 -->
      <div class="slider">
        <div
          class="slider-item"
          :class="[item.isSelect ? 'active-slider-item' : '']"
          v-for="(item, index) in sliderItem"
          :key="index"
          @click="handleSelect(item)"
        >
          {{ item.label }}
        </div>
      </div>
      <!-- 选项栏 -->
      <div class="options">
        <div
          class="option-item"
          v-for="(item, index) in sliderItem[activeIndex].options"
          :key="index"
        >
          <div class="option-item-top">
            <div class="option-item-top-label">{{ item.label }}</div>
            <div
              v-for="(tag, index) in item.tag"
              :key="index"
              class="option-item-top-tag"
            >
              {{ tag }}
            </div>
          </div>
          <div class="option-item-line" @click="handleIconSelect(item)">
            <div class="option-item-line-cost">￥{{ item.cost }}</div>
            <div class="option-item-line-select">
              <img
                src="../../../../static/img/recommed/unSelected.png"
                alt="未选中"
                v-if="!item.isSelect"
              />
              <img
                src="../../../../static/img/recommed/selected.png"
                alt="选中"
                v-if="item.isSelect"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-button type="info" class="btn-loc" size="normal" @click="submit">选好了</van-button>
  </div>
</template>

<script>
export default {
  name: "attention",
  data() {
    return {
      activeKey: 0,
      activeIndex: 0,
      activeSlider: true,
      iconSelect: false,
      sliderItem: [
        {
          id: "1",
          label: "体检费",
          type: 0,
          isSelect: true,
          options: [
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
          ],
        },
        {
          id: "2",
          label: "体检费",
          type: 0,
          isSelect: false,
          options: [
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
          ],
        },
        {
          id: "3",
          label: "体检费",
          type: 0,
          isSelect: false,
          options: [
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
            {
              label: "一般检查",
              cost: 0,
              tag: ["不限"],
              isSelect: false,
            },
          ],
        },
      ],
    };
  },
  methods: {
    submit(){
      wx.navigateTo({
        url: '/pages/phyExamApp/singleApp/appointment/index',
      });
    },
    handleIconSelect(item) {
      console.log(item);
      item.isSelect = !item.isSelect;
    },

    handleSelect(item) {
      console.log(item.id);
      // item.isSelect = !item.isSelect;
      console.log(this.sliderItem);

      this.sliderItem.forEach((element) => {
        // if (element.id == item.id) {
        //   element.isSelect = true;
        // }
        element.isSelect = element.id == item.id ? true : false;
      });
    },
    onChange(index) {
      console.log(index);
    },
  },
};
</script>

<style  scoped>
.attention {
  position: relative;
}
.content {
  display: flex;
}
.slider {
  width: 30%;
  height: calc(100vh - 150px);
  overflow: scroll;
  /* border: 1px solid red; */
  background-color: #f7f7f7;
}
.slider-item {
  /* border: 1px solid red; */
  padding: 10px;
  color: #4a4a4d;
}
.active-slider-item {
  color: #498cbc;
  background-color: #fff;
}
.options {
  width: 70%;
  height: calc(100vh - 150px);
  overflow: scroll;
  /* border: 1px solid red; */
}
.option-item {
  border-bottom: 1px solid #f0f0f0;
}
.option-item-top {
  display: flex;
  padding: 4px 10px;
}
.option-item-top-tag {
  margin-left: 10px;
  background-color: #f3f6f6;
  color: #84868d;
  font-size: 12px;
  line-height: 24px;
  padding: 0 4px;
}
.option-item-line {
  display: flex;
  justify-content: space-between;
}
.option-item-line-cost {
  color: #c1676a;
  padding: 4px 10px;
}
.option-item-line-select {
  height: 20px;
  width: 20px;
  margin-right: 10px;
}
.option-item-line-select img {
  width: 100%;
  height: 100%;
}
.btn-loc {
  position: absolute;
  right: 10px;
  margin-top: 10px;
}
</style>